<template>
  <div class="result-box">
    <el-empty class="nothing" v-if="newsList.length===0" description="空空如也"></el-empty>
    <div class="result-content" v-for="news in newsList" :key="news" :class="{visited:isvisited===news.news_id}"
    @mouseover="isvisited=news.news_id" @mouseout="isvisited=null" @click="getDetail(news.news_id)">
      <div class="title">{{ news.news_title }}</div>
      <div class="box">
        <div class="author">{{ news.news_author }}</div>
        <div class="date">{{ news.news_date }}</div>
      </div>
      <div class="content">{{ news.news_content }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'MyLikeView',
  setup () {
    const router = useRouter()
    const route = useRoute()
    const newsList:any = ref(null)
    const isvisited = ref(null)
    const userId = route.query.usId

    const getResult = () => {
      axios.post('http://localhost:8081/myLike', { user_id: userId }).then(res => {
        if (res.data != null) {
          newsList.value = res.data
        } else { ElMessage.error('搜索失败') }
      }).catch(error => {
        console.log(error)
      })
    }
    const getDetail = (item:any) => {
      router.push({ path: 'newDetail', query: { news_id: item } })
    }
    getResult()
    return {
      newsList,
      isvisited,
      getDetail
    }
  }
})
</script>

<style scoped>
.result-box{
  position: relative;
  margin-top: 100px;
  margin-left: 200px;
  margin-right: 140px;
  width: 600px;
}
.result-content{
  box-shadow: 0px 0px 5px #bebfc0;
  margin-top: 20px;
  margin-left: 40px;
  width: 700px;
  height: 100px;
}
.title{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  margin-bottom: 10px;
  font-weight: bolder;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.content{
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.box{
  position: relative;
  margin-bottom: 5px;
}
.author{
  position: absolute;
  float: left;
  top: -1px;
  padding-left: 90px;
  text-align: left;
  /* color: gray; */
  font-size: x-small;
}
.date{
  padding-left: 10px;
  text-align: left;
  /* color: gray; */
  font-size: x-small;
}
.visited{
  margin-top: 20px;
  margin-left: 40px;
  width: 700px;
  height: 100px;
  color: white;
  background-color: #aae3f8;
}
.nothing{
  left: 21%;
  position: relative;
}
</style>
